<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>全局组件</title>
	<script src="js/vue.js"></script>
</head>
<body>
		
<div id="app">
	<div>
		<input type="text" v-model="inputValue">
		<button @click="itemPush">提交</button>
	</div>
	<ul>
		<todo-item @del-index="del_item" v-for="(item, index) of list" :key="index" :content="item" :index="index"></todo-item>
	</ul>
</div>

</body>
<script>
// 全局组件
Vue.component('todo-item', {
	props:['content', 'index'],
	template: `<li>{{content}} &nbsp;&nbsp;<button @click="delItem(index)">删除</button></li>`,
	methods:{
		delItem:function(index){
			this.$emit('del-index', index);
		}
	}
})
let vm = new Vue({
	el:'#app',
	data: {
		inputValue: "hello",
		list: ['test1', 'test2']
	},
	methods:{
		itemPush:function(){
			this.list.unshift(this.inputValue);
			this.inputValue = '';
		},
		del_item:function(index){
			this.list.splice(index, 1);
		}
	}
})

</script>
</html>
